<template>
  <div class="content">
    <!--加载中-->
    <Spin size="large" fix v-if="spinShow"></Spin>
    <!--导航-->
    <div class="banner">
      <div class="banner_center">
        本次测试共 {{ topicNum }}题，满分{{ branch }}分，{{
          qualified
        }}分合格，答题时间：{{ examTime }}
        <Button
          class="banner_btn"
          type="primary"
          shape="circle"
          :loading="loading"
          @click="toLoading"
        >
          <span v-if="!loading">提交试卷</span>
          <span v-else>提交中...</span>
        </Button>
        <Modal
          v-model="modal1"
          title="提交试卷"
          @on-ok="ok"
          @on-cancel="cancel"
        >
          <div style="text-align: center">提交试卷后结束答题</div>
          <div style="text-align: center">事实显示本次成绩</div>
          <div style="text-align: center">是否确认交卷?</div>
        </Modal>
      </div>
    </div>
    <!--答题-->
    <div class="answer">
      <!--做题板块-->
      <div class="answer_three">
        <div class="answer_three_header">
          已答 <span class="zi_lan">{{ switchNum }}</span> 题 / 共
          <span>{{ topicNum }} </span>题
          <div class="time">剩余时间: {{ minute }}</div>
        </div>
        <div class="answer_three_tips">
          <div v-if="Diagnosis == 1">
            <span class="zi_lan">单选题</span> &nbsp;(共{{ dan }}道题，每题{{
              danfen
            }}分，每题有且仅有一个正确答案)
          </div>
          <div v-if="Diagnosis == 2">
            <span class="zi_lan">多选题</span> &nbsp;(共{{ duo }}道题，每题{{
              duofen
            }}分，每题有多个正确答案)
          </div>
          <div v-if="Diagnosis == 3">
            <span class="zi_lan">判断题</span> &nbsp;(共{{ pan }}道题，每题{{
              panfen
            }}分，每题有且仅有一个正确答案)
          </div>
          <div v-if="Diagnosis == 5">
            <span class="zi_lan">填空题</span> &nbsp;(共{{ tian }}道题，每题{{
              tianfen
            }}分，每题有且仅有一个正确答案)
          </div>
        </div>
        <div class="subject">{{ title }}、{{ content }}</div>
        <ul>
          <li v-on:click="choice(index)" v-for="(item, index) in items">
            <div
              :class="
                item.state == 1
                  ? 'li_lan'
                  : item.state == 2
                  ? 'li_red'
                  : item.state == 3
                  ? 'li_red'
                  : ''
              "
            ></div>
            {{ item.one }}
          </li>
          <li v-if="Diagnosis == 5">
            请输入答案:
            <input
              type="text"
              v-model="inputValue"
              style="border:0;border-bottom:1px solid black;"
              @blur="inputit()"
            />
          </li>
        </ul>
        <!--标记-->
        <div
          class="sign"
          v-bind:class="hoverBiao == true ? '' : 'hoverBiao'"
          v-on:click="sign()"
        >
          {{ signBtn }}
        </div>
        <!--下一题-->
        <div class="upDown">
          <div v-if="title != 1" class="up" v-on:click="up()">上一题</div>
          <div v-if="topicNum != title" class="down" v-on:click="down()">
            下一题
          </div>
        </div>
      </div>
      <!--图例板块-->
      <div class="answer_one">
        <div>
          图例
        </div>
        <div class="answer_one_div">
          <div class="answer_one_div_k">
            <div></div>
            未做
          </div>
          <div class="answer_one_div_k">
            <div></div>
            已做
          </div>
          <div class="answer_one_div_k">
            <div></div>
            标记
          </div>
          <div class="answer_one_div_k">
            <div></div>
            当前
          </div>
        </div>
      </div>
      <!--选项卡板块-->
      <div class="answer_two">
        单选题
        <div class="radio">
          <div
            v-on:click="cardClick(subRadio, index, index + 1)"
            :class="subRadio.cardStyle"
            v-for="(subRadio, index) in subRadio"
          >
            {{ index + 1 }}
          </div>
        </div>
        多选题
        <div class="check">
          <div
            v-on:click="
              cardClick(subCheck, index, subRadio.length + (index + 1))
            "
            :class="subCheck.cardStyle"
            v-for="(subCheck, index) in subCheck"
          >
            {{ subRadio.length + (index + 1) }}
          </div>
        </div>
        判断题
        <div class="judge">
          <div
            v-on:click="
              cardClick(
                subJudge,
                index,
                subRadio.length + subCheck.length + (index + 1)
              )
            "
            :class="subJudge.cardStyle"
            v-for="(subJudge, index) in subJudge"
          >
            {{ subRadio.length + subCheck.length + (index + 1) }}
          </div>
        </div>

        填空题
        <div class="tiankong">
          <div
            v-on:click="
              cardClick(
                subFill,
                index,
                subRadio.length +
                  subCheck.length +
                  subJudge.length +
                  (index + 1)
              )
            "
            :class="subFill.cardStyle"
            v-for="(subFill, index) in subFill"
          >
            {{
              subRadio.length + subCheck.length + subJudge.length + (index + 1)
            }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      extractQuestion: "", //专题考试抽题
      current: 2,
      loading: false, //提交试卷
      spinShow: false, //加载中

      topicNum: "", //总共多少道题
      branch: "", //总分
      qualified: "", //合格分数
      examTime: "", //考试时间
      dan: "",
      duo: "",
      pan: "",
      tian: "",
      danfen: "",
      duofen: "",
      panfen: "",
      tianfen: "",
      countDown: null, //倒计时
      minute: "", //分秒
      moment: "", //开始的时间
      chuTime: "", //初始时间

      switchNum: 0, //实时监听已答题数
      inputValue: "", //填空输入值
      subRadio: [], //单选题
      subCheck: [], //多选
      subJudge: [], //判断
      subFill: [], //填空

      content: "", //题目内容
      items: [], //题目选项
      Diagnosis: 1, //1单选题2多选题 3选判断
      title: 1, //题号

      signBtn: "标记",
      hoverBiao: true,

      modal1: false, //弹窗
      templateId: "", //模板id
      timer:'',//定时器
    };
  },
  methods: {
    stripscript: function(s) {
      var pattern = new RegExp(
        "[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]"
      );
      var rs = "";
      for (var i = 0; i < s.length; i++) {
        rs = rs + s.substr(i, 1).replace(pattern, "");
      }
      return rs;
    },
    ok() {
      this.$Message.info("交卷成功");
      this.Submission();
    },
    Submission() {
      //提交试卷
      // console.log(this.subRadio);
      // console.log(this.subCheck);
      // console.log(this.subJudge);
      if(this.timer!=''){
        clearTimeout(this.timer)
      }
      var questionAnswers = [];
      //                    单选题
      for (var i = 0; i < this.subRadio.length; i++) {
        var daan = "";
        var aa = "" + this.subRadio[i].answer;
        var z = aa.split("");
        for (var j = 0; j < z.length; j++) {
          if (this.subRadio[i].answer == 0) {
            //a
            var dd = "" + daan;
            console.log(dd, "****");
            daan = dd + "A";
          }
          if (this.subRadio[i].answer == 1) {
            //b
            var dd = "" + daan;
            daan = dd + "B";
          }
          if (this.subRadio[i].answer == 2) {
            //c
            var dd = "" + daan;
            daan = dd + "C";
          }
          if (this.subRadio[i].answer == 3) {
            //d
            var dd = "" + daan;
            daan = dd + "D";
          }
        }
        var mark;
        if (this.subRadio[i].stBiao == false) {
          mark = 0;
        } else {
          mark = 1;
        }
        // console.log(daan, "------------------");
        questionAnswers.push({
          questionId: this.subRadio[i].id,
          questionType: this.subRadio[i].type,
          userAnswers: daan, //用户答案
          isMark: mark
        });
      }
      //          多选题
      // console.log("多选的长度：" + this.subCheck.length);
      for (var i = 0; i < this.subCheck.length; i++) {
        var daan = "";
        var aa = "" + this.subCheck[i].answer;
        var z = aa.split("");
        for (var j = 0; j < z.length; j++) {
          if (this.subCheck[i].answer[j] == 0) {
            //a
            var dd = "" + daan;
            daan = dd + "A";
            daan = daan.split("");
            daan = daan.sort(function(a, b) {
              if (a.toString().toLowerCase() > b.toString().toLowerCase())
                return 1;
              return -1;
            });
          }
          if (this.subCheck[i].answer[j] == 1) {
            //b
            var dd = "" + daan;
            daan = dd + "B";
            daan = daan.split("");
            daan = daan.sort(function(a, b) {
              if (a.toString().toLowerCase() > b.toString().toLowerCase())
                return 1;
              return -1;
            });
          }
          if (this.subCheck[i].answer[j] == 2) {
            //c
            var dd = "" + daan;
            daan = dd + "C";
            daan = daan.split("");
            daan = daan.sort(function(a, b) {
              if (a.toString().toLowerCase() > b.toString().toLowerCase())
                return 1;
              return -1;
            });
          }
          if (this.subCheck[i].answer[j] == 3) {
            //d
            var dd = "" + daan;
            daan = dd + "D";
            daan = daan.split("");
            daan = daan.sort(function(a, b) {
              if (a.toString().toLowerCase() > b.toString().toLowerCase())
                return 1;
              return -1;
            });
          }
        }
        var mark;
        if (this.subCheck[i].stBiao == false) {
          mark = 0;
        } else {
          mark = 1;
        }
        // console.log(daan);
        var daanVal = []; //答案数组
        for (var t = 0; t < daan.length; t++) {
          if (daan[t] == ",") {
          } else {
            daanVal.push(daan[t]);
          }
        }
        // console.log(daanVal);
        daanVal = daanVal.join(",");
        // console.log(daanVal);
        questionAnswers.push({
          questionId: this.subCheck[i].id,
          questionType: this.subCheck[i].type,
          userAnswers: daanVal, //用户答案
          isMark: mark
        });
      }
      //          判断题
      for (var i = 0; i < this.subJudge.length; i++) {
        var daan = "";
        var aa = "" + this.subJudge[i].answer;
        var z = aa.split("");
        for (var j = 0; j < z.length; j++) {
          if (this.subJudge[i].answer == 0) {
            //a
            var dd = "" + daan;
            daan = dd + "A";
          }
          if (this.subJudge[i].answer == 1) {
            //b
            var dd = "" + daan;
            daan = dd + "B";
          }
          if (this.subJudge[i].answer == 2) {
            //c
            var dd = "" + daan;
            daan = dd + "C";
          }
          if (this.subJudge[i].answer == 3) {
            //d
            var dd = "" + daan;
            daan = dd + "D";
          }
        }
        var mark;
        if (this.subJudge[i].stBiao == false) {
          mark = 0;
        } else {
          mark = 1;
        }

        questionAnswers.push({
          questionId: this.subJudge[i].id,
          questionType: this.subJudge[i].type,
          userAnswers: daan, //用户答案
          isMark: mark
        });
      }

      for (var i = 0; i < this.subFill.length; i++) {
        var daan = "";
        var aa = this.subFill[i].answer;
        var z = this.stripscript(aa);

        var mark;
        if (this.subFill[i].stBiao == false) {
          mark = 0;
        } else {
          mark = 1;
        }
        questionAnswers.push({
          questionId: this.subFill[i].id,
          questionType: this.subFill[i].type,
          userAnswers: z, //用户答案
          isMark: mark
        });
      }

      //发送数据
      // console.log(questionAnswers);
      var examId = this.$route.query.examId; //专题id
      var id = this.$cookies.get("pcexam_id");
      var time = this.chuTime - this.countDown;
      this.$axios({
        url: "web/exam/submit",
        method: "POST",
        data: {
          //            templateId:this.templateId,//模板id
          examId: examId, //专题id
          examTime: time, //考试用时秒
          beginTime: this.moment, //考试开始时间
          userId: id, //用户id
          questionAnswers: questionAnswers //题的数组
        },
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        },
        transformRequest: [
          function(data) {
            //json
            data = JSON.stringify(data);
            return data;
          }
        ]
      })
        .then(response => {
          console.log(response.data);
          var a = this.$route.query.examId;
          var b = this.$route.query.sOpen;
          var c = response.data.examDetailId;
          sessionStorage.removeItem("PC_exam_subRadio");
          sessionStorage.removeItem("PC_exam_subCheck");
          sessionStorage.removeItem("PC_exam_subJudge");
          sessionStorage.removeItem("PC_exam_Time");
          this.$router.push({
            //核心语句
            path: "/result", //跳转的路径
            query: {
              //路由传参时push和query搭配使用 ，作用时传递参数
              examDetailId: c,
              examId: a,
              examname: b
            }
          });
        })
        .catch(error => {
          // console.log("调取失败500");
          this.$Message.error("提交失败！");
        });
    },
    cancel() {
      this.loading = false; //弹窗
    },
    up: function() {
      //上一题
      this.inputValue = "";
      this.switchNum1(); //实时监听已达多少题
      // console.log(this.title - 1);
      if (this.title - 1 < this.subRadio.length) {
        //单选
        var iidx = this.title - 2;
        if (iidx < 0) {
          this.$Message.warning("已经是第一页了");
        } else {
          //渲染
          console.log("去单选的第" + iidx);
          if (this.subRadio[this.title - 1].cardStyle.indexOf("lan") != -1) {
            //删除上一个颜色
            var a = this.subRadio[this.title - 1].cardStyle.split("lan");
            this.subRadio[this.title - 1].cardStyle = a;
          }
          var acc = this.subRadio[iidx].cardStyle; //当前位置的蓝色
          this.subRadio[iidx].cardStyle = acc + " lan";
          //重新赋值
          this.content = this.subRadio[iidx].content; //渲染题目
          this.title = this.title - 1; //渲染题号
          this.items = [];
          if (
            this.subRadio[this.title - 1].optionA == "" ||
            this.subRadio[this.title - 1].optionA == null
          ) {
          } else {
            this.items.push({
              one: this.subRadio[this.title - 1].optionA,
              state: 0
            });
          }
          if (
            this.subRadio[this.title - 1].optionB == "" ||
            this.subRadio[this.title - 1].optionB == null
          ) {
          } else {
            this.items.push({
              one: this.subRadio[this.title - 1].optionB,
              state: 0
            });
          }
          if (
            this.subRadio[this.title - 1].optionC == "" ||
            this.subRadio[this.title - 1].optionC == null
          ) {
          } else {
            this.items.push({
              one: this.subRadio[this.title - 1].optionC,
              state: 0
            });
          }
          if (
            this.subRadio[this.title - 1].optionD == "" ||
            this.subRadio[this.title - 1].optionD == null
          ) {
          } else {
            this.items.push({
              one: this.subRadio[this.title - 1].optionD,
              state: 0
            });
          }
          if (
            this.subRadio[this.title - 1].optionE == "" ||
            this.subRadio[this.title - 1].optionE == null
          ) {
          } else {
            this.items.push({
              one: this.subRadio[this.title - 1].optionE,
              state: 0
            });
          }
          //查看是否标记了
          if (this.subRadio[this.title - 1].stBiao == true) {
            // console.log("true");
            this.signBtn = "取消标记";
            this.hoverBiao = false;
          } else {
            // console.log("false");
            this.signBtn = "标记";
            this.hoverBiao = true;
          }
          //      答题卡信息回显----预防出问题
          var arr = "" + this.subRadio[iidx].answer;
          var strs = arr.split(""); //字符分割
          // console.log(strs);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n];
            this.items[nn].state = 1;
          }
        }
      } else if (this.title - 1 < this.subRadio.length + this.subCheck.length) {
        //多选
        var iidx = this.title - 2;
        if (iidx < this.subRadio.length) {
          // console.log("去单选的" + (this.subRadio.length - 1));
          this.Diagnosis = 1; //单选题赋值
          var j = this.subRadio.length - 1;
          if (this.subCheck[0].cardStyle.indexOf("lan") != -1) {
            //删除上一个颜色
            var a = this.subCheck[0].cardStyle.split("lan");
            this.subCheck[0].cardStyle = a;
          }
          var acc = this.subRadio[j].cardStyle; //当前位置的蓝色
          this.subRadio[j].cardStyle = acc + " lan";
          //重新赋值
          this.content = this.subRadio[j].content; //渲染题目
          this.title = this.title - 1; //渲染题号
          //              var strArr = this.subRadio[j].option.split("&&");
          //              console.log(strArr);
          this.items = [];
          if (
            this.subRadio[this.subRadio.length - 1].optionA == "" ||
            this.subRadio[this.subRadio.length - 1].optionA == null
          ) {
          } else {
            this.items.push({
              one: this.subRadio[this.subRadio.length - 1].optionA,
              state: 0
            });
          }
          if (
            this.subRadio[this.subRadio.length - 1].optionB == "" ||
            this.subRadio[this.subRadio.length - 1].optionB == null
          ) {
          } else {
            this.items.push({
              one: this.subRadio[this.subRadio.length - 1].optionB,
              state: 0
            });
          }
          if (
            this.subRadio[this.subRadio.length - 1].optionC == "" ||
            this.subRadio[this.subRadio.length - 1].optionC == null
          ) {
          } else {
            this.items.push({
              one: this.subRadio[this.subRadio.length - 1].optionC,
              state: 0
            });
          }
          if (
            this.subRadio[this.subRadio.length - 1].optionD == "" ||
            this.subRadio[this.subRadio.length - 1].optionD == null
          ) {
          } else {
            this.items.push({
              one: this.subRadio[this.subRadio.length - 1].optionD,
              state: 0
            });
          }
          if (
            this.subRadio[this.subRadio.length - 1].optionE == "" ||
            this.subRadio[this.subRadio.length - 1].optionE == null
          ) {
          } else {
            this.items.push({
              one: this.subRadio[this.subRadio.length - 1].optionE,
              state: 0
            });
          }
          //查看是否标记了
          if (this.subRadio[this.subRadio.length - 1].stBiao == true) {
            // console.log("true");
            this.signBtn = "取消标记";
            this.hoverBiao = false;
          } else {
            // console.log("false");
            this.signBtn = "标记";
            this.hoverBiao = true;
          }
          //答题卡信息回显----预防出问题(上一个多选去单选)
          var arr = "" + this.subRadio[j].answer;
          var strs = arr.split(""); //字符分割
          // console.log(strs);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n];
            this.items[nn].state = 1;
          }
        } else {
          //渲染
          // console.log("去多选的第" + (iidx - this.subRadio.length));
          var j = this.title - 1 - this.subRadio.length;
          if (this.subCheck[j].cardStyle.indexOf("lan") != -1) {
            //删除上一个颜色
            var a = this.subCheck[j].cardStyle.split("lan");
            this.subCheck[j].cardStyle = a;
          }
          var acc = this.subCheck[iidx - this.subRadio.length].cardStyle; //当前位置的蓝色
          this.subCheck[iidx - this.subRadio.length].cardStyle = acc + " lan";
          //重新赋值
          this.content = this.subCheck[iidx - this.subRadio.length].content; //渲染题目
          this.title = this.title - 1; //渲染题号
          this.items = [];
          if (
            this.subCheck[iidx - this.subRadio.length].optionA == "" ||
            this.subCheck[iidx - this.subRadio.length].optionA == null
          ) {
          } else {
            this.items.push({
              one: this.subCheck[iidx - this.subRadio.length].optionA,
              state: 0
            });
          }
          if (
            this.subCheck[iidx - this.subRadio.length].optionB == "" ||
            this.subCheck[iidx - this.subRadio.length].optionB == null
          ) {
          } else {
            this.items.push({
              one: this.subCheck[iidx - this.subRadio.length].optionB,
              state: 0
            });
          }
          if (
            this.subCheck[iidx - this.subRadio.length].optionC == "" ||
            this.subCheck[iidx - this.subRadio.length].optionC == null
          ) {
          } else {
            this.items.push({
              one: this.subCheck[iidx - this.subRadio.length].optionC,
              state: 0
            });
          }
          if (
            this.subCheck[iidx - this.subRadio.length].optionD == "" ||
            this.subCheck[iidx - this.subRadio.length].optionD == null
          ) {
          } else {
            this.items.push({
              one: this.subCheck[iidx - this.subRadio.length].optionD,
              state: 0
            });
          }
          if (
            this.subCheck[iidx - this.subRadio.length].optionE == "" ||
            this.subCheck[iidx - this.subRadio.length].optionE == null
          ) {
          } else {
            this.items.push({
              one: this.subCheck[iidx - this.subRadio.length].optionE,
              state: 0
            });
          }
          //查看是否标记了
          if (this.subCheck[iidx - this.subRadio.length].stBiao == true) {
            // console.log("true");
            // console.log(this.subCheck[iidx - this.subRadio.length]);
            this.signBtn = "取消标记";
            this.hoverBiao = false;
          } else {
            console.log("false");
            this.signBtn = "标记";
            this.hoverBiao = true;
          }
          //答题卡信息回显----预防出问题(多选)
          var arr = "" + this.subCheck[iidx - this.subRadio.length].answer;
          var strs = arr.split(""); //字符分割
          // console.log(strs);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n];
            this.items[nn].state = 1;
          }
        }
      } else if (
        this.title - 1 <
        this.subRadio.length + this.subCheck.length + this.subJudge.length
      ) {
        //判断
        var iidx = this.title - 2;
        if (iidx < this.subRadio.length + this.subCheck.length) {
          // console.log("去多选的" + (this.subCheck.length - 1));
          this.Diagnosis = 2; //选题赋值
          if (this.subJudge[0].cardStyle.indexOf("lan") != -1) {
            //删除上一个颜色
            var a = this.subJudge[0].cardStyle.split("lan");
            this.subJudge[0].cardStyle = a;
          }
          var acc = this.subCheck[this.subCheck.length - 1].cardStyle; //当前位置的蓝色
          this.subCheck[this.subCheck.length - 1].cardStyle = acc + " lan";
          //重新赋值
          this.content = this.subCheck[this.subCheck.length - 1].content; //渲染题目
          this.title = this.title - 1; //渲染题号
          //              var strArr = this.subCheck[this.subCheck.length-1].option.split("&&");
          //              console.log(strArr);
          this.items = [];
          if (
            this.subCheck[this.subCheck.length - 1].optionA == "" ||
            this.subCheck[this.subCheck.length - 1].optionA == null
          ) {
          } else {
            this.items.push({
              one: this.subCheck[this.subCheck.length - 1].optionA,
              state: 0
            });
          }
          if (
            this.subCheck[this.subCheck.length - 1].optionB == "" ||
            this.subCheck[this.subCheck.length - 1].optionB == null
          ) {
          } else {
            this.items.push({
              one: this.subCheck[this.subCheck.length - 1].optionB,
              state: 0
            });
          }
          if (
            this.subCheck[this.subCheck.length - 1].optionC == "" ||
            this.subCheck[this.subCheck.length - 1].optionC == null
          ) {
          } else {
            this.items.push({
              one: this.subCheck[this.subCheck.length - 1].optionC,
              state: 0
            });
          }
          if (
            this.subCheck[this.subCheck.length - 1].optionD == "" ||
            this.subCheck[this.subCheck.length - 1].optionD == null
          ) {
          } else {
            this.items.push({
              one: this.subCheck[this.subCheck.length - 1].optionD,
              state: 0
            });
          }
          if (
            this.subCheck[this.subCheck.length - 1].optionE == "" ||
            this.subCheck[this.subCheck.length - 1].optionE == null
          ) {
          } else {
            this.items.push({
              one: this.subCheck[this.subCheck.length - 1].optionE,
              state: 0
            });
          }
          //查看是否标记了
          if (this.subCheck[this.subCheck.length - 1].stBiao == true) {
            // console.log("true");
            this.signBtn = "取消标记";
            this.hoverBiao = false;
          } else {
            // console.log("false");
            this.signBtn = "标记";
            this.hoverBiao = true;
          }
          //答题卡信息回显----预防出问题(判断去多选)
          var arr = "" + this.subCheck[this.subCheck.length - 1].answer;
          var strs = arr.split(""); //字符分割
          // console.log(strs);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n];
            this.items[nn].state = 1;
          }
        } else {
          //渲染
          // console.log(
          //   "去判断的第" +
          //     (iidx - (this.subRadio.length + this.subCheck.length))
          // );
          var j = this.title - 1 - this.subRadio.length - this.subCheck.length;
          if (this.subJudge[j].cardStyle.indexOf("lan") != -1) {
            //删除上一个颜色
            var a = this.subJudge[j].cardStyle.split("lan");
            this.subJudge[j].cardStyle = a;
          }
          var acc = this.subJudge[
            iidx - (this.subRadio.length + this.subCheck.length)
          ].cardStyle; //当前位置的蓝色
          this.subJudge[
            iidx - (this.subRadio.length + this.subCheck.length)
          ].cardStyle = acc + " lan";
          //重新赋值
          this.content = this.subJudge[
            iidx - (this.subRadio.length + this.subCheck.length)
          ].content; //渲染题目
          this.title = this.title - 1; //渲染题号
          this.items = [];
          if (
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)]
              .optionA == "" ||
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)]
              .optionA == null
          ) {
          } else {
            this.items.push({
              one: this.subJudge[
                iidx - (this.subRadio.length + this.subCheck.length)
              ].optionA,
              state: 0
            });
          }
          if (
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)]
              .optionB == "" ||
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)]
              .optionB == null
          ) {
          } else {
            this.items.push({
              one: this.subJudge[
                iidx - (this.subRadio.length + this.subCheck.length)
              ].optionB,
              state: 0
            });
          }
          if (
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)]
              .optionC == "" ||
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)]
              .optionC == null
          ) {
          } else {
            this.items.push({
              one: this.subJudge[
                iidx - (this.subRadio.length + this.subCheck.length)
              ].optionC,
              state: 0
            });
          }
          if (
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)]
              .optionD == "" ||
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)]
              .optionD == null
          ) {
          } else {
            this.items.push({
              one: this.subJudge[
                iidx - (this.subRadio.length + this.subCheck.length)
              ].optionD,
              state: 0
            });
          }
          if (
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)]
              .optionE == "" ||
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)]
              .optionE == null
          ) {
          } else {
            this.items.push({
              one: this.subJudge[
                iidx - (this.subRadio.length + this.subCheck.length)
              ].optionE,
              state: 0
            });
          }
          //查看是否标记了
          if (
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)]
              .stBiao == true
          ) {
            // console.log("true");
            this.signBtn = "取消标记";
            this.hoverBiao = false;
          } else {
            console.log("false");
            // this.signBtn = "标记";
            this.hoverBiao = true;
          }
          //答题卡信息回显----预防出问题(判断)
          var arr =
            "" +
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)]
              .answer;
          var strs = arr.split(""); //字符分割
          console.log(strs);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n];
            this.items[nn].state = 1;
          }
        }
      } else if (
        this.title - 1 <
        this.subRadio.length +
          this.subCheck.length +
          this.subJudge.length +
          this.subFill.length
      ) {
        //填空
        var iidx = this.title - 2;
        if (
          iidx <
          this.subRadio.length + this.subCheck.length + this.subJudge.length
        ) {
          //            alert("填空1");
          // console.log("去多选的" + (this.subJudge.length - 1));
          this.Diagnosis = 3; //选题赋值
          if (this.subFill[0].cardStyle.indexOf("lan") != -1) {
            //删除上一个颜色
            var a = this.subFill[0].cardStyle.split("lan");
            this.subFill[0].cardStyle = a;
          }
          var acc = this.subJudge[this.subJudge.length - 1].cardStyle; //当前位置的蓝色
          this.subJudge[this.subJudge.length - 1].cardStyle = acc + " lan";
          //重新赋值
          this.content = this.subJudge[this.subJudge.length - 1].content; //渲染题目
          this.title = this.title - 1; //渲染题号
          this.items = [];
          if (
            this.subJudge[this.subJudge.length - 1].optionA == "" ||
            this.subJudge[this.subJudge.length - 1].optionA == null
          ) {
          } else {
            this.items.push({
              one: this.subJudge[this.subJudge.length - 1].optionA,
              state: 0
            });
          }
          if (
            this.subJudge[this.subJudge.length - 1].optionB == "" ||
            this.subJudge[this.subJudge.length - 1].optionB == null
          ) {
          } else {
            this.items.push({
              one: this.subJudge[this.subJudge.length - 1].optionB,
              state: 0
            });
          }
          if (
            this.subJudge[this.subJudge.length - 1].optionC == "" ||
            this.subJudge[this.subJudge.length - 1].optionC == null
          ) {
          } else {
            this.items.push({
              one: this.subJudge[this.subJudge.length - 1].optionC,
              state: 0
            });
          }
          if (
            this.subJudge[this.subJudge.length - 1].optionD == "" ||
            this.subJudge[this.subJudge.length - 1].optionD == null
          ) {
          } else {
            this.items.push({
              one: this.subJudge[this.subJudge.length - 1].optionD,
              state: 0
            });
          }
          if (
            this.subJudge[this.subJudge.length - 1].optionE == "" ||
            this.subJudge[this.subJudge.length - 1].optionE == null
          ) {
          } else {
            this.items.push({
              one: this.subJudge[this.subJudge.length - 1].optionE,
              state: 0
            });
          }
          //查看是否标记了
          if (this.subJudge[this.subJudge.length - 1].stBiao == true) {
            // console.log("true");
            this.signBtn = "取消标记";
            this.hoverBiao = false;
          } else {
            // console.log("false");
            this.signBtn = "标记";
            this.hoverBiao = true;
          }
          //答题卡信息回显----预防出问题(判断去多选)
          var arr = "" + this.subJudge[this.subJudge.length - 1].answer;
          var strs = arr.split(""); //字符分割
          // console.log(strs);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n];
            this.items[nn].state = 1;
          }
        } else {
          //            alert("填空2");
          this.Diagnosis = 5; //选题赋值
          // console.log(
          //   "去判断的第" +
          //     (iidx -
          //       (this.subRadio.length +
          //         this.subCheck.length +
          //         this.subJudge.length))
          // );
          var j =
            this.title -
            1 -
            this.subRadio.length -
            this.subCheck.length -
            this.subJudge.length;
          if (this.subFill[j].cardStyle.indexOf("lan") != -1) {
            //删除上一个颜色
            var a = this.subFill[j].cardStyle.split("lan");
            this.subFill[j].cardStyle = a;
          }
          var acc = this.subFill[
            iidx -
              (this.subRadio.length +
                this.subCheck.length +
                this.subJudge.length)
          ].cardStyle; //当前位置的蓝色
          this.subFill[
            iidx -
              (this.subRadio.length +
                this.subCheck.length +
                this.subJudge.length)
          ].cardStyle = acc + " lan";
          //重新赋值
          this.content = this.subFill[
            iidx -
              (this.subRadio.length +
                this.subCheck.length +
                this.subJudge.length)
          ].content; //渲染题目
          this.title = this.title - 1; //渲染题号
          this.inputValue = this.subFill[
            iidx -
              (this.subRadio.length +
                this.subCheck.length +
                this.subJudge.length)
          ].answer;
          // this.items = [];
          // if (this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionA == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionA == null) {
          // } else {
          //   this.items.push({
          //     one: this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionA,
          //     state: 0
          //   })
          // }
          // if (this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionB == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge,length)].optionB == null) {
          // } else {
          //   this.items.push({
          //     one: this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionB,
          //     state: 0
          //   })
          // }
          // if (this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionC == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionC == null) {
          // } else {
          //   this.items.push({
          //     one: this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionC,
          //     state: 0
          //   })
          // }
          // if (this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionD == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionD == null) {
          // } else {
          //   this.items.push({
          //     one: this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionD,
          //     state: 0
          //   })
          // }
          // if (this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionE == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionE == null) {
          // } else {
          //   this.items.push({
          //     one: this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionE,
          //     state: 0
          //   })
          // }
          //查看是否标记了
          if (
            this.subFill[
              iidx -
                (this.subRadio.length +
                  this.subCheck.length +
                  this.subJudge.length)
            ].stBiao == true
          ) {
            // console.log("true");
            this.signBtn = "取消标记";
            this.hoverBiao = false;
          } else {
            // console.log("false");
            this.signBtn = "标记";
            this.hoverBiao = true;
          }
          //答题卡信息回显----预防出问题(判断)
          this.inputValue = this.subFill[
            iidx -
              (this.subRadio.length +
                this.subCheck.length +
                this.subJudge.length)
          ].answer;
        }
      }
    },
    enderingr: function(iidx) {
      // /封装的渲染函数
      //点击答题卡取消上一个div蓝色
      if (this.title - 1 < this.subRadio.length) {
        //单选
        if (this.subRadio[this.title - 1].cardStyle.indexOf("lan") != -1) {
          var a = this.subRadio[this.title - 1].cardStyle.split("lan");
          this.subRadio[this.title - 1].cardStyle = a;
        }
        this.content = this.subRadio[iidx].content; //渲染题目
        this.title = this.title + 1; //渲染题号
        this.items = [];
        if (
          this.subRadio[iidx].optionA == "" ||
          this.subRadio[iidx].optionA == null
        ) {
        } else {
          this.items.push({ one: this.subRadio[iidx].optionA, state: 0 });
        }
        if (
          this.subRadio[iidx].optionB == "" ||
          this.subRadio[iidx].optionB == null
        ) {
        } else {
          this.items.push({ one: this.subRadio[iidx].optionB, state: 0 });
        }
        if (
          this.subRadio[iidx].optionC == "" ||
          this.subRadio[iidx].optionC == null
        ) {
        } else {
          this.items.push({ one: this.subRadio[iidx].optionC, state: 0 });
        }
        if (
          this.subRadio[iidx].optionD == "" ||
          this.subRadio[iidx].optionD == null
        ) {
        } else {
          this.items.push({ one: this.subRadio[iidx].optionD, state: 0 });
        }
        if (
          this.subRadio[iidx].optionE == "" ||
          this.subRadio[iidx].optionE == null
        ) {
        } else {
          this.items.push({ one: this.subRadio[iidx].optionE, state: 0 });
        }
        //查看是否标记了
        if (this.subRadio[iidx].stBiao == true) {
          console.log("true");
          this.signBtn = "取消标记";
          this.hoverBiao = false;
        } else {
          console.log("false");
          this.signBtn = "标记";
          this.hoverBiao = true;
        }
        //            var strArr = this.subRadio[iidx].option.split("&&");
        //            console.log(strArr);
        //            for (var i=0;i<strArr.length;i++) {
        //              this.items.push({
        //                one: strArr[i],
        //                state: 0
        //              })
        //            }
      } else if (this.title - 1 < this.subRadio.length + this.subCheck.length) {
        //多选
        var j = this.title - 1 - this.subRadio.length;
        if (this.subCheck[j].cardStyle.indexOf("lan") != -1) {
          var a = this.subCheck[j].cardStyle.split("lan");
          this.subCheck[j].cardStyle = a;
        }
        this.content = this.subCheck[iidx].content; //渲染题目
        this.title = this.title + 1; //渲染题号
        //            var strArr = this.subCheck[iidx].option.split("&&");
        //            console.log(strArr);
        this.items = [];
        if (
          this.subCheck[iidx].optionA == "" ||
          this.subCheck[iidx].optionA == null
        ) {
        } else {
          this.items.push({ one: this.subCheck[iidx].optionA, state: 0 });
        }
        if (
          this.subCheck[iidx].optionB == "" ||
          this.subCheck[iidx].optionB == null
        ) {
        } else {
          this.items.push({ one: this.subCheck[iidx].optionB, state: 0 });
        }
        if (
          this.subCheck[iidx].optionC == "" ||
          this.subCheck[iidx].optionC == null
        ) {
        } else {
          this.items.push({ one: this.subCheck[iidx].optionC, state: 0 });
        }
        if (
          this.subCheck[iidx].optionD == "" ||
          this.subCheck[iidx].optionD == null
        ) {
        } else {
          this.items.push({ one: this.subCheck[iidx].optionD, state: 0 });
        }
        if (
          this.subCheck[iidx].optionE == "" ||
          this.subCheck[iidx].optionE == null
        ) {
        } else {
          this.items.push({ one: this.subCheck[iidx].optionE, state: 0 });
        }
        //查看是否标记了
        if (this.subCheck[iidx].stBiao == true) {
          console.log("true");
          this.signBtn = "取消标记";
          this.hoverBiao = false;
        } else {
          console.log("false");
          this.signBtn = "标记";
          this.hoverBiao = true;
        }
      } else if (
        this.title - 1 <
        this.subRadio.length + this.subCheck.length + this.subJudge.length
      ) {
        //判断
        var j = this.title - 1 - (this.subRadio.length + this.subCheck.length);
        if (this.subJudge[j].cardStyle.indexOf("lan") != -1) {
          var a = this.subJudge[j].cardStyle.split("lan");
          this.subJudge[j].cardStyle = a;
        }
        this.content = this.subJudge[iidx].content; //渲染题目
        this.title = this.title + 1; //渲染题号
        //            var strArr = this.subJudge[iidx].option.split("&&");
        //            console.log(strArr);
        this.items = [];
        if (
          this.subJudge[iidx].optionA == "" ||
          this.subJudge[iidx].optionA == null
        ) {
        } else {
          this.items.push({ one: this.subJudge[iidx].optionA, state: 0 });
        }
        if (
          this.subJudge[iidx].optionB == "" ||
          this.subJudge[iidx].optionB == null
        ) {
        } else {
          this.items.push({ one: this.subJudge[iidx].optionB, state: 0 });
        }
        if (
          this.subJudge[iidx].optionC == "" ||
          this.subJudge[iidx].optionC == null
        ) {
        } else {
          this.items.push({ one: this.subJudge[iidx].optionC, state: 0 });
        }
        if (
          this.subJudge[iidx].optionD == "" ||
          this.subJudge[iidx].optionD == null
        ) {
        } else {
          this.items.push({ one: this.subJudge[iidx].optionD, state: 0 });
        }
        if (
          this.subJudge[iidx].optionE == "" ||
          this.subJudge[iidx].optionE == null
        ) {
        } else {
          this.items.push({ one: this.subJudge[iidx].optionE, state: 0 });
        }
        //查看是否标记了
        if (this.subJudge[iidx].stBiao == true) {
          console.log("true");
          this.signBtn = "取消标记";
          this.hoverBiao = false;
        } else {
          console.log("false");
          this.signBtn = "标记";
          this.hoverBiao = true;
        }
      } else {
        //填空
        var j =
          this.title -
          1 -
          (this.subRadio.length + this.subCheck.length + this.subJudge.length);
        if (this.subFill[j].cardStyle.indexOf("lan") != -1) {
          var a = this.subFill[j].cardStyle.split("lan");
          this.subFill[j].cardStyle = a;
        }
        this.content = this.subFill[iidx].content; //渲染题目
        this.title = this.title + 1; //渲染题号
        this.items = [];
        //查看是否标记了
        if (this.subFill[iidx].stBiao == true) {
          console.log("true");
          this.signBtn = "取消标记";
          this.hoverBiao = false;
        } else {
          console.log("false");
          this.signBtn = "标记";
          this.hoverBiao = true;
        }
      }
    },
    down: function() {
      //下一题
      this.inputValue = "";
      this.switchNum1(); //实时监听已达多少题
      // console.log(this.title);
      // console.log(this.inputValue);
      // console.log(this.subRadio.length);
      // console.log(this.subCheck.length);
      // console.log(this.subJudge.length);
      // console.log(this.subFill.length);
      if (this.title - 1 < this.subRadio.length) {
        //单选
        console.log("单选题");
        var iidx = this.title;
        if (iidx > this.subRadio.length - 1) {
          //已经是单选的最后一个了
          console.log("去多选的0");
          this.Diagnosis = 2; //选题赋值
          this.content = this.subCheck[0].content; //渲染题目
          this.title = this.title + 1; //渲染题号
          this.items = [];
          if (
            this.subCheck[0].optionA == "" ||
            this.subCheck[0].optionA == null
          ) {
          } else {
            this.items.push({ one: this.subCheck[0].optionA, state: 0 });
          }
          if (
            this.subCheck[0].optionB == "" ||
            this.subCheck[0].optionB == null
          ) {
          } else {
            this.items.push({ one: this.subCheck[0].optionB, state: 0 });
          }
          if (
            this.subCheck[0].optionC == "" ||
            this.subCheck[0].optionC == null
          ) {
          } else {
            this.items.push({ one: this.subCheck[0].optionC, state: 0 });
          }
          if (
            this.subCheck[0].optionD == "" ||
            this.subCheck[0].optionD == null
          ) {
          } else {
            this.items.push({ one: this.subCheck[0].optionD, state: 0 });
          }
          if (
            this.subCheck[0].optionE == "" ||
            this.subCheck[0].optionE == null
          ) {
          } else {
            this.items.push({ one: this.subCheck[0].optionE, state: 0 });
          }
          //查看是否标记了
          if (this.subCheck[0].stBiao == true) {
            console.log("true");
            this.signBtn = "取消标记";
            this.hoverBiao = false;
          } else {
            console.log("false");
            this.signBtn = "标记";
            this.hoverBiao = true;
          }
          //答题卡信息回显----预防出问题(单选转多选)
          var arr = "" + this.subCheck[0].answer;
          var strs = arr.split(""); //字符分割
          console.log(strs);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n];
            this.items[nn].state = 1;
          }
          var i = this.subRadio.length - 1; //清楚单选最后一个样式
          if (this.subRadio[i].cardStyle.indexOf("lan") != -1) {
            var a = this.subRadio[i].cardStyle.split("lan");
            this.subRadio[i].cardStyle = a;
          }
          var acc = this.subCheck[0].cardStyle; //当前位置的蓝色
          this.subCheck[0].cardStyle = acc + " lan";
        } else {
          console.log("去单选的第" + iidx);
          this.enderingr(iidx);
          var acc = this.subRadio[iidx].cardStyle; //当前位置的蓝色
          this.subRadio[iidx].cardStyle = acc + " lan";
          //答题卡信息回显----预防出问题(单选)
          var arr = "" + this.subRadio[iidx].answer;
          var strs = arr.split(""); //字符分割
          console.log(strs);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n];
            this.items[nn].state = 1;
          }
        }
      } else if (this.title - 1 < this.subRadio.length + this.subCheck.length) {
        //多选
        console.log("多选题");
        var iidx = this.title;
        if (iidx > this.subRadio.length + this.subCheck.length - 1) {
          console.log("去判断选的0");
          this.Diagnosis = 3; //选题赋值
          this.content = this.subJudge[0].content; //渲染题目
          this.title = this.title + 1; //渲染题号
          this.items = [];
          if (
            this.subJudge[0].optionA == "" ||
            this.subJudge[0].optionA == null
          ) {
          } else {
            this.items.push({ one: this.subJudge[0].optionA, state: 0 });
          }
          if (
            this.subJudge[0].optionB == "" ||
            this.subJudge[0].optionB == null
          ) {
          } else {
            this.items.push({ one: this.subJudge[0].optionB, state: 0 });
          }
          if (
            this.subJudge[0].optionC == "" ||
            this.subJudge[0].optionC == null
          ) {
          } else {
            this.items.push({ one: this.subJudge[0].optionC, state: 0 });
          }
          if (
            this.subJudge[0].optionD == "" ||
            this.subJudge[0].optionD == null
          ) {
          } else {
            this.items.push({ one: this.subJudge[0].optionD, state: 0 });
          }
          if (
            this.subJudge[0].optionE == "" ||
            this.subJudge[0].optionE == null
          ) {
          } else {
            this.items.push({ one: this.subJudge[0].optionE, state: 0 });
          }
          //查看是否标记了
          if (this.subJudge[0].stBiao == true) {
            console.log("true");
            this.signBtn = "取消标记";
            this.hoverBiao = false;
          } else {
            console.log("false");
            this.signBtn = "标记";
            this.hoverBiao = true;
          }
          //答题卡信息回显----预防出问题(多选转判断)
          var arr = "" + this.subJudge[0].answer;
          var strs = arr.split(""); //字符分割
          console.log(strs);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n];
            this.items[nn].state = 1;
          }
          var i = this.title - 1 - this.subRadio.length - 1; //清楚多选最后一个样式
          console.log(i);
          if (this.subCheck[i].cardStyle.indexOf("lan") != -1) {
            var a = this.subCheck[i].cardStyle.split("lan");
            this.subCheck[i].cardStyle = a;
          }
          var acc = this.subJudge[0].cardStyle; //当前位置的蓝色
          this.subJudge[0].cardStyle = acc + " lan";
        } else {
          this.enderingr(iidx - this.subRadio.length);
          console.log("去多选的第" + (iidx - this.subRadio.length));
          var acc = this.subCheck[iidx - this.subRadio.length].cardStyle; //当前位置的蓝色
          this.subCheck[iidx - this.subRadio.length].cardStyle = acc + " lan";
          //  答题卡信息回显----预防出问题(多选)
          var arr = "" + this.subCheck[iidx - this.subRadio.length].answer;
          var strs = arr.split(""); //字符分割
          console.log(strs);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n];
            this.items[nn].state = 1;
          }
        }
      } else if (
        this.title - 1 <
        this.subRadio.length + this.subCheck.length + this.subJudge.length
      ) {
        //填空
        console.log("判断题");
        var iidx = this.title;
        if (
          iidx >
          this.subRadio.length + this.subCheck.length + this.subJudge.length - 1
        ) {
          console.log("去填空的0");
          this.Diagnosis = 5; //选题赋值
          this.content = this.subFill[0].content; //渲染题目
          this.title = this.title + 1; //渲染题号
          this.inputValue = this.subFill[0].answer;
          console.log(this.inputValue);
          this.items = [];
          if (
            this.subFill[0].optionA == "" ||
            this.subFill[0].optionA == null
          ) {
          } else {
            this.items.push({ one: this.subFill[0].optionA, state: 0 });
          }
          if (
            this.subFill[0].optionB == "" ||
            this.subFill[0].optionB == null
          ) {
          } else {
            this.items.push({ one: this.subFill[0].optionB, state: 0 });
          }
          if (
            this.subFill[0].optionC == "" ||
            this.subFill[0].optionC == null
          ) {
          } else {
            this.items.push({ one: this.subFill[0].optionC, state: 0 });
          }
          if (
            this.subFill[0].optionD == "" ||
            this.subFill[0].optionD == null
          ) {
          } else {
            this.items.push({ one: this.subFill[0].optionD, state: 0 });
          }
          if (
            this.subFill[0].optionE == "" ||
            this.subFill[0].optionE == null
          ) {
          } else {
            this.items.push({ one: this.subFill[0].optionE, state: 0 });
          }
          //查看是否标记了
          if (this.subFill[0].stBiao == true) {
            console.log("true");
            this.signBtn = "取消标记";
            this.hoverBiao = false;
          } else {
            console.log("false");
            this.signBtn = "标记";
            this.hoverBiao = true;
          }
          //答题卡信息回显----预防出问题(多选转判断)

          var i =
            this.title - 1 - (this.subRadio.length + this.subCheck.length) - 1; //清楚判断最后一个样式
          console.log(i);
          if (this.subJudge[i].cardStyle.indexOf("lan") != -1) {
            var a = this.subJudge[i].cardStyle.split("lan");
            this.subJudge[i].cardStyle = a;
          }
          var acc = this.subFill[0].cardStyle; //当前位置的蓝色
          this.subFill[0].cardStyle = acc + " lan";
          this.inputValue = this.subFill[i].answer;
        } else {
          this.enderingr(iidx - this.subRadio.length - this.subCheck.length);
          console.log(
            "去多选的第" + (iidx - this.subRadio.length - this.subCheck.length)
          );
          var acc = this.subJudge[
            iidx - (this.subRadio.length + this.subCheck.length)
          ].cardStyle; //当前位置的蓝色
          this.subJudge[
            iidx - (this.subRadio.length + this.subCheck.length)
          ].cardStyle = acc + " lan";
          //  答题卡信息回显----预防出问题(多选)
          var arr =
            "" +
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)]
              .answer;
          var strs = arr.split(""); //字符分割
          console.log(strs);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n];
            this.items[nn].state = 1;
          }
        }
      } else if (
        this.title - 1 <
        this.subRadio.length +
          this.subCheck.length +
          this.subJudge.length +
          this.subFill.length
      ) {
        //填空
        console.log("填空题");
        var iidx = this.title;
        if (
          iidx >
          this.subRadio.length +
            this.subCheck.length +
            this.subJudge.length +
            this.subFill.length -
            1
        ) {
          this.$Message.warning("已经是最后一个了");
        } else {
          //渲染
          console.log(
            "去判断的第" +
              (iidx -
                (this.subRadio.length +
                  this.subCheck.length +
                  this.subJudge.length))
          );
          this.enderingr(
            iidx -
              (this.subRadio.length +
                this.subCheck.length +
                this.subJudge.length)
          );
          var acc = this.subFill[
            iidx -
              (this.subRadio.length +
                this.subCheck.length +
                this.subJudge.length)
          ].cardStyle; //当前位置的蓝色
          this.subFill[
            iidx -
              (this.subRadio.length +
                this.subCheck.length +
                this.subJudge.length)
          ].cardStyle = acc + " lan";
          //    答题卡信息回显----预防出问题(多选)
          this.inputValue = this.subFill[
            iidx -
              (this.subRadio.length +
                this.subCheck.length +
                this.subJudge.length)
          ].answer;
        }
      }
    },
    cardClick: function(type, index, title) {
      //答题卡点击
      this.inputValue = "";
      this.switchNum1(); //实时监听已达多少题
      // console.log(type); //总的类型
      // console.log(index); //
      // console.log(title);
      // console.log(this.title);
      //点击答题卡取消上一个div蓝色
      if (this.title - 1 < this.subRadio.length) {
        //单选
        if (this.subRadio[this.title - 1].cardStyle.indexOf("lan") != -1) {
          var a = this.subRadio[this.title - 1].cardStyle.split("lan");
          this.subRadio[this.title - 1].cardStyle = a;
        }
      } else if (this.title - 1 < this.subRadio.length + this.subCheck.length) {
        //多选
        var j = this.title - 1 - this.subRadio.length;
        if (this.subCheck[j].cardStyle.indexOf("lan") != -1) {
          var a = this.subCheck[j].cardStyle.split("lan");
          this.subCheck[j].cardStyle = a;
        }
      } else if (
        this.title - 1 <
        this.subRadio.length + this.subCheck.length + this.subJudge.length
      ) {
        //判断
        var j = this.title - 1 - (this.subRadio.length + this.subCheck.length);
        if (this.subJudge[j].cardStyle.indexOf("lan") != -1) {
          var a = this.subJudge[j].cardStyle.split("lan");
          this.subJudge[j].cardStyle = a;
        }
      } else if (
        this.title - 1 <
        this.subRadio.length +
          this.subCheck.length +
          this.subJudge.length +
          this.subFill.length
      ) {
        //填空
        var j =
          this.title -
          1 -
          (this.subRadio.length + this.subCheck.length + this.subJudge.length);
        if (this.subFill[j].cardStyle.indexOf("lan") != -1) {
          var a = this.subFill[j].cardStyle.split("lan");
          this.subFill[j].cardStyle = a;
        }
      }

      this.content = type.content; //题目
      this.title = title;
      this.items = [];
      if (type.optionA == "" || type.optionA == null) {
      } else {
        this.items.push({ one: type.optionA, state: 0 });
      }
      if (type.optionB == "" || type.optionB == null) {
      } else {
        this.items.push({ one: type.optionB, state: 0 });
      }
      if (type.optionC == "" || type.optionC == null) {
      } else {
        this.items.push({ one: type.optionC, state: 0 });
      }
      if (type.optionD == "" || type.optionD == null) {
      } else {
        this.items.push({ one: type.optionD, state: 0 });
      }
      if (type.optionE == "" || type.optionE == null) {
      } else {
        this.items.push({ one: type.optionE, state: 0 });
      }
      if (type.stBiao == true) {
        console.log("true");
        this.signBtn = "取消标记";
        this.hoverBiao = false;
      } else {
        console.log("false");
        this.signBtn = "标记";
        this.hoverBiao = true;
      }
      //点击答题卡新的div加蓝色
      if (type.type == 1) {
        var acc = this.subRadio[index].cardStyle;
        this.subRadio[index].cardStyle = acc + " lan";
        //答题卡信息回显
        var arr = "" + this.subRadio[index].answer;
        var strs = arr.split(""); //字符分割
        console.log(strs);
        for (var n = 0; n < strs.length; n++) {
          var nn = strs[n];
          this.items[nn].state = 1;
        }
      } else if (type.type == 2) {
        var acc = this.subCheck[index].cardStyle;
        this.subCheck[index].cardStyle = acc + " lan";
        //答题卡信息回显
        var arr = "" + this.subCheck[index].answer;
        var strs = arr.split(""); //字符分割
        console.log(strs);
        for (var n = 0; n < strs.length; n++) {
          var nn = strs[n];
          this.items[nn].state = 1;
        }
      } else if (type.type == 3) {
        var acc = this.subJudge[index].cardStyle;
        this.subJudge[index].cardStyle = acc + " lan";
        //答题卡信息回显
        var arr = "" + this.subJudge[index].answer;
        var strs = arr.split(""); //字符分割
        console.log(strs);
        for (var n = 0; n < strs.length; n++) {
          var nn = strs[n];
          this.items[nn].state = 1;
        }
      } else if (type.type == 5) {
        var acc = this.subFill[index].cardStyle;
        this.subFill[index].cardStyle = acc + " lan";
        //答题卡信息回显
        this.inputValue = this.subFill[index].answer;
      }
      this.Diagnosis = type.type; //渲染数据的题型
    },
    toLoading() {
      this.modal1 = true;
      this.loading = true;
    },
    choice: function(obj) {
      //选择
      if (this.Diagnosis == 2) {
        //多选题
        var idx = this.title - 1 - this.subRadio.length;
        var style = this.subCheck[idx].cardStyle;
        this.subCheck[idx].cardStyle = style + " yes";
        // console.log(this.items);
        // console.log(this.subCheck);
        if (this.items[obj].state == 1) {
          this.items[obj].state = 0;
        } else {
          this.items[obj].state = 1;
        }
        var arr = [];
        for (var m = 0; m < this.items.length; m++) {
          if (this.items[m].state == 1) {
            //选择的
            arr.push(m);
          }
        }
        if (arr.length == 0) {
          //无数据
          console.log("无数据");
          var a = this.subCheck[idx].cardStyle.split("yes");
          var c = a.join("");
          console.log(c);
          this.subCheck[idx].cardStyle = c;
        } else {
          console.log("you数据");
        }
        this.subCheck[idx].answer = arr.join(""); //存储用户选择的答案
      } else {
        //单选题
        if (this.Diagnosis == 1) {
          //单选题存储
          var style = this.subRadio[this.title - 1].cardStyle;
          this.subRadio[this.title - 1].cardStyle = style + " yes";
          this.subRadio[this.title - 1].answer = obj; //存储用户选择的答案
          console.log(this.subRadio);
        } else if (this.Diagnosis == 3) {
          //判断题存储
          var idx =
            this.title - 1 - (this.subCheck.length + this.subRadio.length);
          var style = this.subJudge[idx].cardStyle;
          this.subJudge[idx].cardStyle = style + " yes";
          this.subJudge[idx].answer = obj; //存储用户选择的答案
          console.log(idx);
        }
        //调节样式
        for (var z = 0; z < this.items.length; z++) {
          if (z == obj) {
            this.items[obj].state = 1;
          } else {
            this.items[z].state = 0;
          }
        }
      }
      this.switchNum1(); //实时监听已达多少题
    },

    inputit: function() {
      if (this.Diagnosis == 5) {
        var idx =
          this.title -
          1 -
          (this.subCheck.length + this.subRadio.length + this.subJudge.length);
        var style = this.subFill[idx].cardStyle;
        this.subFill[idx].cardStyle = style + " yes";
        this.subFill[idx].answer = this.inputValue; //存储用户选择的答案
        console.log(idx);
        if (this.subFill[idx].answer == "") {
          this.subFill[idx].cardStyle = "not";
          if (this.subFill[idx].stBiao == true) {
            this.subFill[idx].cardStyle = "biao not";
          }
        }
      }
    },

    sign: function() {
      if (this.hoverBiao == true) {
        //标记
        if (this.Diagnosis == 1) {
          //单选题
          var style = this.subRadio[this.title - 1].cardStyle;
          this.subRadio[this.title - 1].cardStyle = style + " biao";
          this.subRadio[this.title - 1].stBiao = true;
        } else if (this.Diagnosis == 2) {
          //多选
          var idx = this.title - 1 - this.subRadio.length;
          var style = this.subCheck[idx].cardStyle;
          this.subCheck[idx].cardStyle = style + " biao";
          this.subCheck[idx].stBiao = true;
        } else if (this.Diagnosis == 3) {
          //判断
          var idx =
            this.title - 1 - (this.subRadio.length + this.subCheck.length);
          var style = this.subJudge[idx].cardStyle;
          this.subJudge[idx].cardStyle = style + " biao";
          this.subJudge[idx].stBiao = true;
        } else if (this.Diagnosis == 5) {
          //判断
          var idx =
            this.title -
            1 -
            (this.subRadio.length +
              this.subCheck.length +
              this.subJudge.length);
          var style = this.subFill[idx].cardStyle;
          this.subFill[idx].cardStyle = style + " biao";
          this.subFill[idx].stBiao = true;
        }
        this.signBtn = "取消标记";
        this.hoverBiao = false;
      } else {
        //取消标记问题
        if (this.Diagnosis == 1) {
          //单选题
          console.log(this.subRadio[this.title - 1].cardStyle);
          var a = this.subRadio[this.title - 1].cardStyle.split("biao");
          c;
          var c = a.join("");
          this.subRadio[this.title - 1].cardStyle = c;
          this.subRadio[this.title - 1].stBiao = false;
        } else if (this.Diagnosis == 2) {
          //多选
          var idx = this.title - 1 - this.subRadio.length;
          var style = this.subCheck[idx].cardStyle;
          var a = this.subCheck[idx].cardStyle.split("biao");
          var c = a.join("");
          this.subCheck[idx].cardStyle = c;
          this.subCheck[idx].stBiao = false;
        } else if (this.Diagnosis == 3) {
          //判断
          var idx =
            this.title - 1 - (this.subRadio.length + this.subCheck.length);
          var style = this.subJudge[idx].cardStyle;
          var a = this.subJudge[idx].cardStyle.split("biao");
          var c = a.join("");
          this.subJudge[idx].cardStyle = c;
          this.subJudge[idx].stBiao = false;
        } else if (this.Diagnosis == 5) {
          //填空
          var idx =
            this.title -
            1 -
            (this.subRadio.length +
              this.subCheck.length +
              this.subJudge.length);
          var style = this.subFill[idx].cardStyle;
          var a = this.subFill[idx].cardStyle.split("biao");
          var c = a.join("");
          this.subFill[idx].cardStyle = c;
          this.subFill[idx].stBiao = false;
        }
        this.signBtn = "标记";
        this.hoverBiao = true;
      }
    },
    topic: function() {
      if (
        localStorage.getItem("PC_exam_templateId") == null ||
        localStorage.getItem("PC_exam_templateId") == "null"
      ) {
        var templateId = "";
      } else {
        var templateId = localStorage.getItem("PC_exam_templateId");
      }

      //获取试题
      var examId = this.$route.query.examId;
      var examTime = this.$route.query.examTime;
      this.$axios({
        url:
          "/web/exam/extractQuestion/" + examId + "?templateId=" + templateId,
        method: "GET",
        data: {},
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        transformRequest: [
          function(data) {
            //json
            data = JSON.stringify(data);
            return data;
          }
        ]
      })
        .then(response => {
          console.log(response.data);
          //            渲染要求
          this.dan = response.data.examSetting.singleChoiceCount; //单选题数量
          this.duo = response.data.examSetting.multipleChoiceCount; //多选题数量
          this.pan = response.data.examSetting.judgeCount; //多选题数量
          this.tian = response.data.examSetting.gapFillingCount; //填空题数量
          this.danfen = response.data.examSetting.singleChoiceScore; //单选题分数
          this.duofen = response.data.examSetting.multipleChoiceScore; //多选题分数
          this.panfen = response.data.examSetting.judgeScore; //判断题分数
          this.tianfen = response.data.examSetting.gapFillingScore; //填空题分数
          this.topicNum =
            response.data.examSetting.singleChoiceCount +
            response.data.examSetting.multipleChoiceCount +
            response.data.examSetting.judgeCount +
            response.data.examSetting.gapFillingCount; //总共多少道题
          this.branch =
            response.data.examSetting.singleChoiceCount *
              response.data.examSetting.singleChoiceScore +
            response.data.examSetting.multipleChoiceCount *
              response.data.examSetting.multipleChoiceScore +
            response.data.examSetting.judgeCount *
              response.data.examSetting.judgeScore +
            response.data.examSetting.gapFillingCount *
              response.data.examSetting.gapFillingScore; //总共多少分
          this.qualified = response.data.examSetting.qualifiedGrade; //合格分数
          this.examTime = examTime + "分"; //+parseInt(response.data.examSetting.examTime % 60)+'秒';//考试时间
          if(sessionStorage.getItem("PC_exam_Time")=="null"|| sessionStorage.getItem("PC_exam_Time")==null){
              this.countDown = parseInt(examTime * 60);
              // localStorage.setItem("PC_exam_Time",parseInt(examTime * 60));
              // console.log(localStorage.getItem("PC_exam_Time"));
          }else{
            this.countDown = sessionStorage.getItem("PC_exam_Time");
            // console.log(localStorage.getItem("PC_exam_Time"));
          }
         
          this.chuTime = parseInt(examTime * 60);
          this.templateId = response.data.templateId;
          localStorage.setItem("PC_exam_templateId", response.data.templateId); //本地存储考试id
          if(this.timer!=''){
            clearTimeout(this.timer)
          }
          this.countTime();
          //渲染答题卡
          for (var i = 0; i < response.data.questions.length; i++) {
            if (response.data.questions[i].type == "1") {
              if (
                response.data.questions[i].optionC == "" ||
                response.data.questions[i].optionC == null
              ) {
                this.subRadio.push({
                  id: response.data.questions[i].id, //题目id
                  content: response.data.questions[i].content, //题目内容
                  optionA: "A  " + response.data.questions[i].optionA, //题目选项A
                  optionB: "B  " + response.data.questions[i].optionB, //题目选项B
                  type: response.data.questions[i].type, //题目类型
                  cardStyle: "not", //答题卡样式   yes biao lan
                  answer: "", //用户答案
                  stBiao: false
                });
              } else if (
                response.data.questions[i].optionD == "" ||
                response.data.questions[i].optionD == null
              ) {
                this.subRadio.push({
                  id: response.data.questions[i].id, //题目id
                  content: response.data.questions[i].content, //题目内容
                  optionA: "A  " + response.data.questions[i].optionA, //题目选项A
                  optionB: "B  " + response.data.questions[i].optionB, //题目选项B
                  optionC: "C  " + response.data.questions[i].optionC, //题目选项C
                  type: response.data.questions[i].type, //题目类型
                  cardStyle: "not", //答题卡样式   yes biao lan
                  answer: "", //用户答案
                  stBiao: false
                });
              } else if (
                response.data.questions[i].optionE == "" ||
                response.data.questions[i].optionE == null
              ) {
                this.subRadio.push({
                  id: response.data.questions[i].id, //题目id
                  content: response.data.questions[i].content, //题目内容
                  optionA: "A  " + response.data.questions[i].optionA, //题目选项A
                  optionB: "B  " + response.data.questions[i].optionB, //题目选项B
                  optionC: "C  " + response.data.questions[i].optionC, //题目选项C
                  optionD: "D  " + response.data.questions[i].optionD, //题目选项D
                  type: response.data.questions[i].type, //题目类型
                  cardStyle: "not", //答题卡样式   yes biao lan
                  answer: "", //用户答案
                  stBiao: false
                });
              } else {
                this.subRadio.push({
                  id: response.data.questions[i].id, //题目id
                  content: response.data.questions[i].content, //题目内容
                  optionA: "A  " + response.data.questions[i].optionA, //题目选项A
                  optionB: "B  " + response.data.questions[i].optionB, //题目选项B
                  optionC: "C  " + response.data.questions[i].optionC, //题目选项C
                  optionD: "D  " + response.data.questions[i].optionD, //题目选项D
                  optionE: "E  " + response.data.questions[i].optionE, //题目选项E
                  type: response.data.questions[i].type, //题目类型
                  cardStyle: "not", //答题卡样式   yes biao lan
                  answer: "", //用户答案
                  stBiao: false
                });
              }
            } else if (response.data.questions[i].type == "2") {
              if (
                response.data.questions[i].optionC == "" ||
                response.data.questions[i].optionC == null
              ) {
                this.subCheck.push({
                  id: response.data.questions[i].id, //题目id
                  content: response.data.questions[i].content, //题目内容
                  optionA: "A  " + response.data.questions[i].optionA, //题目选项A
                  optionB: "B  " + response.data.questions[i].optionB, //题目选项B
                  type: response.data.questions[i].type, //题目类型
                  cardStyle: "not", //答题卡样式
                  answer: "", //用户答案
                  stBiao: false
                });
              } else if (
                response.data.questions[i].optionD == "" ||
                response.data.questions[i].optionD == null
              ) {
                this.subCheck.push({
                  id: response.data.questions[i].id, //题目id
                  content: response.data.questions[i].content, //题目内容
                  optionA: "A  " + response.data.questions[i].optionA, //题目选项A
                  optionB: "B  " + response.data.questions[i].optionB, //题目选项B
                  optionC: "C  " + response.data.questions[i].optionC, //题目选项C
                  type: response.data.questions[i].type, //题目类型
                  cardStyle: "not", //答题卡样式
                  answer: "", //用户答案
                  stBiao: false
                });
              } else if (
                response.data.questions[i].optionE == "" ||
                response.data.questions[i].optionE == null
              ) {
                this.subCheck.push({
                  id: response.data.questions[i].id, //题目id
                  content: response.data.questions[i].content, //题目内容
                  optionA: "A  " + response.data.questions[i].optionA, //题目选项A
                  optionB: "B  " + response.data.questions[i].optionB, //题目选项B
                  optionC: "C  " + response.data.questions[i].optionC, //题目选项C
                  optionD: "D  " + response.data.questions[i].optionD, //题目选项D
                  type: response.data.questions[i].type, //题目类型
                  cardStyle: "not", //答题卡样式
                  answer: "", //用户答案
                  stBiao: false
                });
              } else {
                this.subCheck.push({
                  id: response.data.questions[i].id, //题目id
                  content: response.data.questions[i].content, //题目内容
                  optionA: "A  " + response.data.questions[i].optionA, //题目选项A
                  optionB: "B  " + response.data.questions[i].optionB, //题目选项B
                  optionC: "C  " + response.data.questions[i].optionC, //题目选项C
                  optionD: "D  " + response.data.questions[i].optionD, //题目选项D
                  optionE: "E  " + response.data.questions[i].optionE, //题目选项E
                  type: response.data.questions[i].type, //题目类型
                  cardStyle: "not", //答题卡样式
                  answer: "", //用户答案
                  stBiao: false
                });
              }
            } else if (response.data.questions[i].type == "3") {
              if (
                response.data.questions[i].optionC == "" ||
                response.data.questions[i].optionC == null
              ) {
                this.subJudge.push({
                  id: response.data.questions[i].id, //题目id
                  content: response.data.questions[i].content, //题目内容
                  optionA: "A  " + response.data.questions[i].optionA, //题目选项A
                  optionB: "B  " + response.data.questions[i].optionB, //题目选项B
                  type: response.data.questions[i].type, //题目类型
                  cardStyle: "not", //答题卡样式
                  answer: "", //用户答案
                  stBiao: false
                });
              } else if (
                response.data.questions[i].optionD == "" ||
                response.data.questions[i].optionD == null
              ) {
                this.subJudge.push({
                  id: response.data.questions[i].id, //题目id
                  content: response.data.questions[i].content, //题目内容
                  optionA: "A  " + response.data.questions[i].optionA, //题目选项A
                  optionB: "B  " + response.data.questions[i].optionB, //题目选项B
                  optionC: "C  " + response.data.questions[i].optionC, //题目选项C
                  type: response.data.questions[i].type, //题目类型
                  cardStyle: "not", //答题卡样式
                  answer: "", //用户答案
                  stBiao: false
                });
              } else if (
                response.data.questions[i].optionE == "" ||
                response.data.questions[i].optionE == null
              ) {
                this.subJudge.push({
                  id: response.data.questions[i].id, //题目id
                  content: response.data.questions[i].content, //题目内容
                  optionA: "A  " + response.data.questions[i].optionA, //题目选项A
                  optionB: "B  " + response.data.questions[i].optionB, //题目选项B
                  optionC: "C  " + response.data.questions[i].optionC, //题目选项C
                  optionD: "D  " + response.data.questions[i].optionD, //题目选项D
                  type: response.data.questions[i].type, //题目类型
                  cardStyle: "not", //答题卡样式
                  answer: "", //用户答案
                  stBiao: false
                });
              } else {
                this.subJudge.push({
                  id: response.data.questions[i].id, //题目id
                  content: response.data.questions[i].content, //题目内容
                  optionA: "A  " + response.data.questions[i].optionA, //题目选项A
                  optionB: "B  " + response.data.questions[i].optionB, //题目选项B
                  optionC: "C  " + response.data.questions[i].optionC, //题目选项C
                  optionD: "D  " + response.data.questions[i].optionD, //题目选项D
                  optionE: "E  " + response.data.questions[i].optionE, //题目选项D
                  type: response.data.questions[i].type, //题目类型
                  cardStyle: "not", //答题卡样式
                  answer: "", //用户答案
                  stBiao: false
                });
              }
            } else if (response.data.questions[i].type == "5") {
              this.subFill.push({
                id: response.data.questions[i].id, //题目id
                content: response.data.questions[i].content, //题目内容
                type: response.data.questions[i].type, //题目类型
                cardStyle: "not", //答题卡样式
                answer: "", //用户答案
                stBiao: false
              });
            } else {
              this.$Message.error("答题卡渲染失败！");
            }
          }
          //一开始渲染题
          if (this.subRadio.length != 0) {
            //单选题是否有数据
            this.content = this.subRadio[0].content; //题目
            //              var strArr = this.subRadio[0].option.split("&&");
            this.subRadio[0].cardStyle = "not lan";
            this.items = [];
            //             选项分开，
            if (
              this.subRadio[0].optionA == "" ||
              this.subRadio[0].optionA == null
            ) {
            } else {
              this.items.push({ one: this.subRadio[0].optionA, state: 0 });
            }
            if (
              this.subRadio[0].optionB == "" ||
              this.subRadio[0].optionB == null
            ) {
            } else {
              this.items.push({ one: this.subRadio[0].optionB, state: 0 });
            }
            if (
              this.subRadio[0].optionC == "" ||
              this.subRadio[0].optionC == null
            ) {
            } else {
              this.items.push({ one: this.subRadio[0].optionC, state: 0 });
            }
            if (
              this.subRadio[0].optionD == "" ||
              this.subRadio[0].optionD == null
            ) {
            } else {
              this.items.push({ one: this.subRadio[0].optionD, state: 0 });
            }
            if (
              this.subRadio[0].optionE == "" ||
              this.subRadio[0].optionE == null
            ) {
            } else {
              this.items.push({ one: this.subRadio[0].optionE, state: 0 });
            }
          } else if (this.subCheck.length != 0) {
            //多选题是否有数据
            this.content = this.subCheck[0].content;
            var strArr = this.subCheck[0].option.split("&&");
            this.items = [];
            if (
              this.subCheck[0].optionA == "" ||
              this.subCheck[0].optionA == null
            ) {
            } else {
              this.items.push({ one: this.subCheck[0].optionA, state: 0 });
            }
            if (
              this.subCheck[0].optionB == "" ||
              this.subCheck[0].optionB == null
            ) {
            } else {
              this.items.push({ one: this.subCheck[0].optionB, state: 0 });
            }
            if (
              this.subCheck[0].optionC == "" ||
              this.subCheck[0].optionC == null
            ) {
            } else {
              this.items.push({ one: this.subCheck[0].optionC, state: 0 });
            }
            if (
              this.subCheck[0].optionD == "" ||
              this.subCheck[0].optionD == null
            ) {
            } else {
              this.items.push({ one: this.subCheck[0].optionD, state: 0 });
            }
            if (
              this.subCheck[0].optionE == "" ||
              this.subCheck[0].optionE == null
            ) {
            } else {
              this.items.push({ one: this.subCheck[0].optionE, state: 0 });
            }
          } else if (this.subJudge.length != 0) {
            //判断题是否有数据
            this.content = this.subJudge[0].content;
            var strArr = this.subJudge[0].option.split("&&");
            this.items = [];
            if (
              this.subJudge[0].optionA == "" ||
              this.subJudge[0].optionA == null
            ) {
            } else {
              this.items.push({ one: this.subJudge[0].optionA, state: 0 });
            }
            if (
              this.subJudge[0].optionB == "" ||
              this.subJudge[0].optionB == null
            ) {
            } else {
              this.items.push({ one: this.subJudge[0].optionB, state: 0 });
            }
            if (
              this.subJudge[0].optionC == "" ||
              this.subJudge[0].optionC == null
            ) {
            } else {
              this.items.push({ one: this.subJudge[0].optionC, state: 0 });
            }
            if (
              this.subJudge[0].optionD == "" ||
              this.subJudge[0].optionD == null
            ) {
            } else {
              this.items.push({ one: this.subJudge[0].optionD, state: 0 });
            }
            if (
              this.subJudge[0].optionE == "" ||
              this.subJudge[0].optionE == null
            ) {
            } else {
              this.items.push({ one: this.subJudge[0].optionE, state: 0 });
            }
          } else if (this.subFill.length != 0) {
            this.content = this.subFill[0].content;
          }
          this.huixian();
          console.log(this.subCheck);
        })
        .catch(error => {
          console.log(error);
          this.$Message.error("暂无考试试题！请联系管理员");
          this.spinShow = false;
        });
    },
    countTime: function() {
      this.countDown--;
      //console.log(this.countDown)
      if(sessionStorage.getItem("PC_exam_Time")!=null ||sessionStorage.getItem("PC_exam_Time")!='null'){
        sessionStorage.setItem("PC_exam_Time",this.countDown)
      }
      this.minute =
        parseInt(this.countDown / 60) +
        "分" +
        parseInt(this.countDown % 60) +
        "秒";
      if (this.countDown <= 0) {
        //交卷
        this.Submission();
      } else {
        this.timer=setTimeout(this.countTime, 1000);
      }
    },
    switchNum1: function() {
      //实时监听已答多少题
      this.switchNum = 0;
      for (var i = 0; i < this.subRadio.length; i++) {
        console.log(typeof this.subRadio[i].answer);
        if (this.subRadio[i].answer == "") {
        } else {
          this.switchNum++;
        }
      }
      for (var w = 0; w < this.subCheck.length; w++) {
        if (this.subCheck[w].answer == "") {
        } else {
          this.switchNum++;
        }
      }
      for (var e = 0; e < this.subJudge.length; e++) {
        if (this.subJudge[e].answer == "") {
        } else {
          this.switchNum++;
        }
      }
      for (var r = 0; r < this.subFill.length; r++) {
        if (this.subFill[r].answer == "") {
        } else {
          this.switchNum++;
        }
      }
    },
    sessionStorage:function () {//本地存储
          if ((this.title-1)<this.subRadio.length){//解决蓝色颜色的bug--单选
            var a=this.subRadio[this.title-1].cardStyle.split('lan');
            this.subRadio[this.title-1].cardStyle=a;
          }else if((this.title-1)<(this.subRadio.length+this.subCheck.length)){  //多选
            var a=this.subCheck[this.title-1].cardStyle.split('lan');
            this.subCheck[this.title-1].cardStyle=a;
          }else {  //判断
            var a=this.subJudge[this.title-1].cardStyle.split('lan');
            this.subJudge[this.title-1].cardStyle=a;
          }
          sessionStorage.setItem('PC_exam_subRadio',JSON.stringify(this.subRadio));   //本地存储单选
          sessionStorage.setItem('PC_exam_subCheck',JSON.stringify(this.subCheck));   //本地存储多选
          sessionStorage.setItem('PC_exam_subJudge',JSON.stringify(this.subJudge));   //本地存储判断
          
    },
    huixian:function () {
//      开始答案回显
        if (sessionStorage.getItem("PC_exam_subRadio") == null||sessionStorage.getItem("PC_exam_subRadio") == 'null') {

        }else{
//       本地有存储的情况下
          //单选
          var PC_exam_subRadio=sessionStorage.getItem("PC_exam_subRadio");
          var radio=JSON.parse(PC_exam_subRadio)
          this.subRadio=radio;
          //多选
          var PC_exam_subCheck=sessionStorage.getItem("PC_exam_subCheck");
          var check=JSON.parse(PC_exam_subCheck)
          this.subCheck=check;
          //判断
          var PC_exam_subJudge=sessionStorage.getItem("PC_exam_subJudge");
          var judge=JSON.parse(PC_exam_subJudge)
          this.subJudge=judge;
          //时间
          var PC_exam_Time=sessionStorage.getItem("PC_exam_Time");
          // console.log(PC_exam_Time)
          if(PC_exam_Time<=0){
            //交卷
            this.Submission();
          }

        //渲染第一个题的答案
        //一开始渲染题
        if (this.subRadio.length != 0) {
          //单选题答案渲染
          var acc = this.subRadio[0].cardStyle; //当前位置的蓝色
          this.subRadio[0].cardStyle = acc + " lan";

          //修改bug
          this.content = this.subRadio[0].content; //题目
          this.subRadio[0].cardStyle = "not lan";
          this.items = [];
          //             选项分开，
          if (
            this.subRadio[0].optionA == "" ||
            this.subRadio[0].optionA == null
          ) {
          } else {
            this.items.push({ one: this.subRadio[0].optionA, state: 0 });
          }
          if (
            this.subRadio[0].optionB == "" ||
            this.subRadio[0].optionB == null
          ) {
          } else {
            this.items.push({ one: this.subRadio[0].optionB, state: 0 });
          }
          if (
            this.subRadio[0].optionC == "" ||
            this.subRadio[0].optionC == null
          ) {
          } else {
            this.items.push({ one: this.subRadio[0].optionC, state: 0 });
          }
          if (
            this.subRadio[0].optionD == "" ||
            this.subRadio[0].optionD == null
          ) {
          } else {
            this.items.push({ one: this.subRadio[0].optionD, state: 0 });
          }
          if (
            this.subRadio[0].optionE == "" ||
            this.subRadio[0].optionE == null
          ) {
          } else {
            this.items.push({ one: this.subRadio[0].optionE, state: 0 });
          }

          //题回显
          var arr = "" + this.subRadio[0].answer;
          var strs = arr.split(""); //字符分割
          console.log(this.items);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n];
            console.log(nn);
            this.items[nn].state = 1;
            //              this.items.state=1;
          }
        } else if (this.subCheck.length != 0) {
          //多选题答案渲染
          var acc = this.subCheck[0].cardStyle; //当前位置的蓝色
          this.subCheck[0].cardStyle = acc + " lan";
        } else if (this.subJudge.length != 0) {
          //判断题答案渲染
          var acc = this.subJudge[0].cardStyle; //当前位置的蓝色
          this.subJudge[0].cardStyle = acc + " lan";
        } else {
          var acc = this.subFill[0].cardStyle; //当前位置的蓝色
          this.subFill[0].cardStyle = acc + " lan";
        }
      }

    }
  },
  beforeRouteLeave(to, from, next) {
    console.log(to);

    if (to.path === "/result") {
      sessionStorage.removeItem("PC_exam_subRadio");
      sessionStorage.removeItem("PC_exam_subCheck");
      sessionStorage.removeItem("PC_exam_subJudge");
      sessionStorage.removeItem("PC_exam_Time");
      clearTimeout(this.timer)
      next();
    } else if (to.path === "/index") {
      sessionStorage.removeItem("PC_exam_subRadio");
      sessionStorage.removeItem("PC_exam_subCheck");
      sessionStorage.removeItem("PC_exam_subJudge");
      sessionStorage.removeItem("PC_exam_Time");
      clearTimeout(this.timer)
      const answer = window.confirm(
        "确定要离开当前页面？离开后信息将不会被保存！"
      );
      if (answer) {
        next();
      } else {
        next(false);
      }
    }else {
      sessionStorage.removeItem("PC_exam_subRadio");
      sessionStorage.removeItem("PC_exam_subCheck");
      sessionStorage.removeItem("PC_exam_subJudge");
      sessionStorage.removeItem("PC_exam_Time");
      clearTimeout(this.timer)
      const answer = window.confirm(
        "确定要离开当前页面？离开后信息将不会被保存！"
      );
      if (answer) {
        next();
      } else {
        next(false);
      }
    }
  },
  mounted: function() {
    if (
      this.$cookies.get("pcexam_username") == undefined ||
      this.$cookies.get("pcexam_username") == "undefined" ||
      this.$cookies.get("pcexam_username") == "" ||
      this.$cookies.get("pcexam_username") == null ||
      this.$cookies.get("pcexam_username") == "null"
    ) {
      this.$router.push("/login");
    } else {
          let _this = this;
      //刷新页面提示

      window.onbeforeunload = function (e) {
        var url = _this.$route.path;
        if(url =="/exam"){
          e = e || window.event;
          // 兼容IE8和Firefox 4之前的版本
          if (e) {
            e.returnValue = '刷新后所填信息会清空，是否刷新？';
            _this.sessionStorage();
          }
          // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
          return '关闭提示';
        }else{
          window.onbeforeunload =null
        }
      };
      //获取试题
      this.topic();
      //存储开始时间
      var a=this.$moment().format()
      a= a.substring(0,a.length-6);
      this.moment=a;
    
      this.huixian();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul li {
  list-style: none;
  line-height: 40px;
  cursor: pointer;
  font-size: 16px;
}

.content {
  /*padding-top: 138px;*/
}

.banner {
  background: white;
  margin-top: 14px;
  height: 60px;
  width: 100%;
  z-index: 1;
  box-shadow: 0px 0px 11px 0px rgba(4, 0, 0, 0.1);
}

.answer {
  width: 1082px;
  margin: auto;
  margin-top: 26px;
}

.banner_center {
  width: 1082px;
  margin: auto;
  line-height: 60px;
  color: #3b50a1;
  position: relative;
}

.banner_btn {
  position: absolute;
  right: 0;
  top: 15px;
  width: 100px;
  border-radius: 15px;
  font-size: 18px;
  color: white;
  background: #3b50a1;
  border: none;
  line-height: 30px;
  padding: 0;
  margin: 0;
}

.answer_one {
  width: 227px;
  height: 124px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 11px 0px rgba(4, 0, 0, 0.1);
  border-radius: 1px;
  padding: 18px 0 0 16px;
}

.answer_two {
  width: 227px;
  height: 642px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 5px 0px rgba(4, 0, 0, 0.1);
  border-radius: 1px;
  margin-top: 19px;
  margin-bottom: 20px;
  padding: 27px 0 27px 15px;
  overflow-y: auto;
}

.answer_three {
  position: relative;
  float: right;
  width: 826px;
  height: 785px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 15px 0px rgba(4, 0, 0, 0.1);
  border-radius: 1px;
  padding: 0 18px 0 18px;
}

.answer_one_div_k {
  width: 34px;
  margin-right: 14px;
  margin-top: 11px;
  font-size: 14px;
  text-align: center;
  display: inline-block;
}

.answer_one_div_k div {
  display: inline-block;
  width: 37px;
  text-align: center;
  height: 35px;
  border-radius: 2px;
}

.answer_one_div_k:nth-of-type(1) div {
  border: 1px solid #bdbdbd;
  background: white;
}

.answer_one_div_k:nth-of-type(2) div {
  border: 1px solid #bdbdbd;
  background: #bdbdbd;
}

.answer_one_div_k:nth-of-type(3) div {
  background: #e9e9e9;
  background-image: url("../../assets/images/red.png");
  background-repeat: no-repeat;
  background-size: 17px 17px;
}

.answer_one_div_k:nth-of-type(4) div {
  border: 1px solid #3b50a1;
  background: #3b50a1;
}

::-webkit-scrollbar {
  display: none;
}

.answer_two > div {
  margin-top: 10px;
}

.answer_two > div > div {
  display: inline-block;
  text-align: center;
  line-height: 30px;
  font-size: 16px;
  margin: 0 7px 9px 0;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 3px;
}

/*未做*/
.not {
  color: #666666;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(189, 189, 189, 1);
}

/*已做*/
.yes {
  color: #666666;
  border: 1px solid #e9e9e9;
  background: #e9e9e9;
}

/*当前*/
.lan {
  background: rgba(59, 80, 161, 1);
  color: white;
  border: 1px solid rgba(59, 80, 161, 1);
}

/*标记*/
.biao {
  background-image: url("../../assets/images/red.png");
  background-repeat: no-repeat;
  background-size: 17px 17px;
  border: 1px solid #f94b5c;
}

/*答题部分*/
.answer_three_header {
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #bdbdbd;
  position: relative;
  font-size: 18px;
  line-height: 70px;
  color: rgba(51, 51, 51, 1);
}

.time {
  width: 200px;
  position: absolute;
  right: 0;
  top: 0;
  color: rgba(59, 80, 161, 1);
}

.zi_lan {
  color: #3b50a1;
  font-size: 16px;
}

.answer_three_tips {
  color: #999999;
  margin: 20px 0 44px 0;
  font-size: 16px;
}

.subject {
  line-height: 30px;
  font-size: 17px;
  margin-bottom: 10px;
}
input:focus {
  outline: none;
}

ul li div {
  width: 20px;
  height: 20px;
  background: rgba(51, 51, 51, 0);
  border: 1px solid rgba(219, 219, 219, 1);
  border-radius: 50%;
  display: inline-block;
  margin: 0 14px -3px 0;
}

.li_lan {
  background: #3b50a1;
  border: 1px solid #3b50a1;
}

.li_red {
  background: #f94b5c;
  border: 1px solid #f94b5c;
}

.li_blue {
  background: blue;
  border: 1px solid blue;
}

.li_yellow {
  background: yellow;
  border: 1px solid yellow;
}

.upDown {
  position: absolute;
  bottom: 58px;
  width: 333px;
  left: 50%;
  margin-left: -117px;
  height: 40px;
}

.upDown div {
  width: 150px;
  height: 40px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(59, 80, 161, 1);
  border-radius: 20px;
  display: inline-block;
  text-align: center;
  line-height: 37px;
  color: #3b50a1;
  cursor: pointer;
  font-size: 18px;
}

.upDown div:hover {
  background: #3b50a1;
  color: white;
}

.upDown div:nth-of-type(1) {
  margin-right: 15px;
}

.sign {
  cursor: pointer;
  margin-top: 38px;
  width: 95px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: rgba(249, 75, 92, 1);
  border: 1px solid rgba(249, 75, 92, 1);
  border-radius: 15px;
  font-size: 18px;
}

.hoverBiao {
  background: #f94b5c;
  color: white;
}
</style>
